<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/react.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/babel.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		 <div id="app1"></div>
		 <div id="app2"></div>
		 <div id="app3"></div>
		 <div id="app4"></div>
		 <div id="app5"></div>
	</body>
	<script type="text/babel">  //此处把javascript 改成babel
		//方法一： 创建了一个组件    React.createClass({})
		var MyBtn =React.createClass({
			render(){
				return(
					<div>
					  <p><button>4444</button></p>
					</div>
				)
			}
		})
		
		var Sove =React.createClass({
			render(){
				return(
					
					<button><em>点我</em></button>
				)
			}
		})
		//渲染 
		var app1=document.getElementById("app1")
		ReactDOM.render(<MyBtn/>,app1)
		
		var app2 =document.getElementById("app2")
		ReactDOM.render(<Sove/>,app2)
		
		
		
		//方法二：  利用构造函数  构建组件
		
		function Lee(){
			return(
				<button><i>haha!</i></button>
			)
		}
		
		var app3 =document.getElementById("app3")
		ReactDOM.render(<Lee/>,app3)
		
		
		//方法三： es6 定义
		
		class Woo extends React.Component{
			render(){
				return(
					<button><i>233333333</i></button>
				)
			}
		}
		
		var app4 =document.getElementById("app4")
		ReactDOM.render(<Woo/>,app4)
		
		
		class Q extends  React.Component{
			render(){
				return(
					<p>This is Airly!</p>
				)
			}
		}
		
		var app5 =document.getElementById("app5")
        ReactDOM.render(<Q/>,app5)
</script>
</html>
